<template>
  <div class="myUpgrade page" ref="webview">
    <van-nav-bar title="会员升级" class="bg_white" left-arrow @click-left="$router.push({'path': '/my'})" />
    <div class="content">
      <div class="bk van-hairline--bottom">
        <span class="label">当前级别</span>
        <div class="sname">{{userInfo.level_name}}</div>
      </div>
      <div class="bk active van-hairline--bottom" @click="isAction=true">
        <span class="label">级别</span>
        <div class="name" :class="{active: levelName}">{{levelName|| '请选择级别'}}</div>
      </div>
      <div class="bk van-hairline--bottom">
        <span class="label">需要注册积分</span>
        <div class="sname">{{levelIntegral || '注册积分可补差额'}}</div>
      </div>
      <div class="bk van-hairline--bottom">
        <span class="label">注册积分余额</span>
        <div class="sname">{{userInfo.regScore}}</div>
      </div>
    </div>
    <div class="submiBtn">
      <van-button class="btn" round :loading="isLoading " @click.native="membershipUpgrade">立即升级</van-button>
    </div>
    <van-action-sheet v-model="isAction" :round="false " @select="selectAction" cancel-text="取消" :actions="levelList" description="选择级别" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'myUpgrade',
  data () {
    return {
      searchValue: '',
      isFocus: false,
      isLoading: false,
      levelIntegral: '',
      levelName: '',
      levelValue: '',
      isAction: false,
      mobile: 0,
      memberUpgrade: {},
      memberLevel: {}
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'level']),
    levelList () {
      return this.level.map(item => {
        item.disabled = this.userInfo.level_value >= item.value;
        return item;
      });
    }
  },
  created () {
  },
  methods: {
    selectAction (data) {
      console.log(data);
      this.levelValue = data.value;
      this.levelName = data.name;
      this.levelIntegral = data.subname;
      this.isAction = false;
    },
    // 立即升级
    membershipUpgrade () {
      // if (parseFloat(this.userInfo.regScore) < parseFloat(this.levelIntegral)) {
      //   this.$toast('注册积分余额不足');
      //   return;
      // }
      this.isLoading = true;
      var options = {
        levelId: this.levelValue
      };
      this.$API.user.membershipUpgrade(options).then(res => {
        if (!res.code) {
          this.$toast('升级成功');
          this.$router.push({ 'path': '/my' });
          this.isLoading = false;
        } else {
          this.$toast(res.message);
          this.isLoading = false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.myUpgrade {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .submiBtn {
    margin: 20px 40px 60px;
    .btn {
      width: 100%;
      height: 100px;
      line-height: 100px;
      border: none;
      .van-button__text {
        color: #125dff;
        font-size: 34px;
      }
    }
    .btn:active::before {
      display: none;
    }
  }
  .content {
    flex: 1;
    background-color: #f5f5f5;
    position: relative;
    overflow-y: auto;
    margin-top: 20px;
  }
  .search-btn {
    padding: 0 20px;
    display: block;
    color: #007aff;
  }
}
</style>
